<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-提交订单</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="../static/css/reset.css">
	<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
</head>
<body>
<div class="header_con" th:include="inner::header"></div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl" th:href="@{/index}"><img src="../static/images/logo.png" th:src="@{/images/logo.png}"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
	</div>

	<h3 class="common_title">确认收货地址</h3>

	<div class="common_list_con clearfix">
		<dl>
			<dt>寄送到：</dt>
			<th:block th:each="addr,row : ${address}">
				<dd>
					<input type="radio" name="addr" th:value="${addr.id}" th:checked="${row.index == 0}">
					<span th:text="${addr.province}">北京市</span>
					<span th:text="${addr.city}">海淀区</span>
					<span th:text="${addr.address}">东北旺西路8号中关村软件园</span>
					（<span th:text="${addr.name}">李思</span> 收）
					<span th:text="${addr.phone}">182****7528</span>
				</dd>
			</th:block>
		</dl>
		<a href="user-addr.html" class="edit_site" th:href="@{/addr}">编辑收货地址</a>

	</div>

	<h3 class="common_title">支付方式</h3>
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input type="radio" name="pay_style" value="1" checked>
			<label class="zhifubao"></label>
		</div>
	</div>

	<h3 class="common_title">商品列表</h3>

	<div class="common_list_con clearfix">
		<ul class="goods_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>
		</ul>
		<th:block th:each="cart,row : ${carts}">
		<ul class="goods_list_td clearfix">
			<li class="col01" th:text="${row.index + 1}">2</li>
			<li class="col02"><img src="../static/images/goods/goods003.jpg" th:src="${cart.product.imageUrl}"/></li>
			<li class="col03" th:text="${cart.product.name}">大兴大棚草莓</li>
			<li class="col04" th:text="${cart.product.unit}">500g</li>
			<li class="col05" th:text="${cart.product.price + '元'}">16.80元</li>
			<li class="col06" th:text="${cart.quantity}">1</li>
			<li class="col07 subtotal"><span th:text="${cart.quantity * cart.product.price + '元'}">16.80元</span></li>
		</ul>
		</th:block>
	</div>

	<h3 class="common_title">总金额结算</h3>

	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_goods_count">共<em th:text="${carts.size()}">2</em>件商品，总金额<b><span id="total">67.20</span>元</b></div>
			<div class="transit">运费：<b><span id="postage">10</span>元</b></div>
			<div class="total_pay">实付款：<b><span id="actual_amount">77.20</span>元</b></div>
		</div>
	</div>

	<div class="order_submit clearfix">
		<a href="javascript:;" id="order_btn">提交订单</a>
	</div>

<div class="popup_con">
	<div class="popup">
		<p>订单提交成功！</p>
	</div>

	<div class="mask"></div>
</div>

<div th:include="inner::footer" class="footer"></div>


	<script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript" th:inline="javascript">
		var user = [[${session.user}]]
		var carts = [[${carts}]]

		$(function(){
			let total = 0;
			$(".subtotal").each(function(){
				total += parseFloat($(this).text());
			})
			$('#total').text(total.toFixed(2))
			$("#actual_amount").text((total + 10).toFixed(2))
		})

		$('#order_btn').click(function() {
			localStorage.setItem('order_finish',2);

			let $addrId = $('input[name="addr"]:checked').val();
			if($addrId == null){
				alert('请选择收货地址');
				return;
			}

			let obj = {
				totalAmount: $('#actual_amount').text(),
				userId: user.id,
				cartIds: [],
				addrId: $addrId,
				payMethod: $('input[name="pay_style"]:checked').val(),
				postage: $('#postage').text()
			}

			for(let i = 0; i < carts.length; i++){
				obj.cartIds.push(carts[i].id)
			}

			$.ajax({
				url: '/order/create',
				type: 'post',
				contentType: 'application/json',
				data: JSON.stringify(obj),
				success: function(result){
					if(result.code == 200){
						if(result.data != null) {
							// 创建一个隐藏的div来存放支付表单
							$('body').append('<div id="pay_form" style="display:none;">' + result.data + '</div>');
							// 自动提交支付表单
							document.forms[0].submit();
						}else{
							$('.popup_con').fadeIn('fast', function() {
								setTimeout(function(){
									$('.popup_con').fadeOut('fast',function(){
										window.location.href = '/order';
									});
								},1500)

							});
						}
					}
				}
			})
		});
	</script>
</body>
</html>